<template>
    <el-row>
        <el-col :span="24">
            <el-row>
                <el-col :span="2" class="title" style="input">帮我买</el-col>
                <el-col :span="2" class="title">帮我取</el-col>
                <el-col :span="2" class="title">帮我送</el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" class="col">
            <el-row>
                <el-col :span="24">
                    <el-row>
                        <el-col :span="7">用户手机号：<el-input v-model="search.name" placeholder="请输入门店名称"
                                clearable /></el-col>
                        <el-col :span="6">下单人姓名:<el-input></el-input></el-col>
                        <el-col :span="8">状态：
                            <el-select v-model="value" >
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="24">
                    <el-row>
                        <el-col :span="6">所属门店:<el-input></el-input></el-col>
                        <el-col :span="10">下单时间:
                            <el-date-picker v-model="search.time" type="daterange" range-separator="至"
                                start-placeholder="起始日期" end-placeholder="终止日期" />
                        </el-col>
                        <el-col :span="4"><el-button type="primary"
                                @click="sousuo(search.name, search.time)">搜索</el-button></el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import axios from 'axios';
let res = null;
// let title = ref("");
// let show = ref(false);
// let mendian = ref({});

let areaList = ref([]);

// const manage = function (item) {
//     console.log(item);

// }
// const xiugai = function (item) {
//     console.log(item);

// }

const search = reactive({
    nmae: null,
    time: null
});

// const xinzeng = function () {
//     show.value = true;
//     title.value = "新增门店";
// }
// const operateAction = async function (data) {
//     if (data) {
//         await axios.post("http://43.143.190.87:8091/panghudaojiaBackend/shop/addShop", {
//             ...data
//         });
//         res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/shop/querySearchShopList?pageNum=1&pageSize=10&phone=&keyword=&shopStatus=&startTime=&endTime=");
//     console.log(res);
//     areaList.value = res.data.data.list.map(item => {
//         item.shopAddress = item.shopLongitude + item.shopLatitude;
//         return item;
//     });

//     }
//     show.value = false;
// }



//组件首次挂载结束（通常代表组件首次加载）
onMounted(async function () {
    res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/shop/querySearchShopList?pageNum=1&pageSize=10&phone=&keyword=&shopStatus=&startTime=&endTime=");
    console.log(res);
    areaList.value = res.data.data.list.map(item => {
        item.shopAddress = item.shopLongitude + item.shopLatitude;
        return item;
    });
})

const value = ref('全部')

const options = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '已取消',
        label: '已取消',
    },
    {
        value: '待接单',
        label: '待接单',
    },
    {
        value: '已接单配送中',
        label: '已接单配送中',
    },
    {
        value: '已完成',
        label: '已完成',
    },
]


</script>

<style lang="less" scoped>
.title:hover {
    color: #10d0d6;
}

.title {
    margin-left: 10px;
}

.el-row {
    margin: 10px;
}

.el-input {
    width: 180px;
    height: 35px;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}

.el-select {
    width: 240px;
}
</style>